<template>
  <div>
    <div class="one">
      <div class="nav">
        <span class="basic">产品详情</span>
      </div>
      <div class="content">
        <div class="left">
          <el-image :src="data.picurl" />
        </div>
        <div class="right">
          <p>产品名称:{{ data.name }}</p>
          <p>价格：${{ data.price }}</p>
          <p>产品编码：{{ data.code }}</p>
          <p>产品型号：{{ data.spec }}</p>
          <p>产品图号：{{ data.productNumber }}</p>
        </div>
        <button>产品询价</button>
      </div>
    </div>

    <div class="two">
      <div class="nav">
        <span class="basic">品牌资料</span>
      </div>
      <div class="content">
        <wangEdit ref="brandDetailRef" />
      </div>
    </div>
    <div class="three">
      <div class="nav">
        <span class="basic">产品详情</span>
      </div>
      <div class="content">
        <wangEdit ref="detailRef" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onBeforeMount } from "vue";
import wangEdit from "@/components/wangEdit/wangEdit.vue";
import { getProductDetail } from "@/api/product/product.js";
import { useRoute } from "vue-router";
//定义后端路由
const path = "http://localhost:8080";
//定义富文本编辑框的同名引用
const detailRef = ref(null);
const brandDetailRef = ref(null);

//获取路由实例
const route = useRoute();

//定义数据对象
const data = ref({
  name: "",
  picurl: "",
  brandDetail: "",
  detail: "",
  price: "",
  code: "",
  spec: "",
  productNumber: ""
});

//页面加载初始化函数
async function init() {
  let id = route.query.id;
  let res = await getProductDetail(id);
  if (res.code == 200) {
    data.value = res.data;
    data.value.picurl = path + data.value.picurl;
    brandDetailRef.value.valueHtml = data.value.brandDetail;
    detailRef.value.valueHtml = data.value.detail;
  }
}
onBeforeMount(() => {
  init();
});
</script>
<style scoped>
.root {
  width: 95vw;
  background-color: #fff;
  border-radius: 5px;
}
.nav {
  background-color: #efefef;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #c1c1c1;
}
.one,
.two,
.three {
  background-color: #ffffff;
  border: 1px solid #c1c1c1;
}
.basic {
  margin-left: 30px;
}
.content {
  position: relative;
  height: 330px;
}
.left {
  width: 250px;
  height: 250px;
  position: absolute;
  background-color: aqua;
  left: 100px;
  top: 40px;
}
.right {
  position: absolute;
  left: 370px;
  top: 40px;
}
.right p {
  display: block;
  padding-top: 25px;
}
.left img {
  width: 250px;
  height: 250px;
}
.content button {
  color: #fff;
  width: 150px;
  height: 50px;
  background-color: #356d9e;
  position: absolute;
  right: 100px;
  bottom: 50px;
}
.two,
.three {
  margin-top: 30px;
}
</style>
